<template>
	<view>
		<view class="tabs-box">
			<u-tabs :list="list1" @change="changeTab" :rules='ril' :current="currTab"></u-tabs>
		</view>
		<view class="" v-show="report">
			<view class="title">{{hspInfo.h_name}}</view>
			<view class="hsp-info">
				<view class="img-box">
					<image :src=" 'http://127.0.0.1:3000'+hspInfo.img" mode=""></image>
				</view>
				<view class="cont">
					<text>联系电话：{{hspInfo.phone}}</text>
					<text>状态：{{h_status}}</text>
				</view>
				<view class="btn">
					<u-button v-if="isAppoi" @click="showModal = true" type="success"
						:disabled="hspInfo.h_status == 0?  false : true " shape="circle" text="预约"></u-button>
					<u-button v-else-if="!isAppoi" type="primary" @click="showAppo = true" shape="circle"
						iconColor="#eee" text="已预约"></u-button>
				</view>
			</view>
		</view>
		<view v-show="!report">
			<u--form labelPosition="left" :model="requserData" :rules="rules" ref="form" :style="{width: '95%' }"
				class="content">
				<text class="title">1.今日您是否有发烧症状？（体温 >= 37.3 °C）</text>
				<u-form-item label=" " labelWidth="15" prop="fever" borderBottom>
					<u-radio-group v-model="radiovalue1" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange1">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<text class="title">2.今日您健康码颜色为？</text>
				<u-form-item label=" " labelWidth="15" prop="color" borderBottom>
					<u-radio-group v-model="radiovalue2" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist2" :key="index"
							:label="item.name" :name="item.name" @change="radioChange2">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<text class="title">3.今日您的家人是否有发烧症状？</text>
				<u-form-item label=" " labelWidth="15" prop="homefever" borderBottom>
					<u-radio-group v-model="radiovalue3" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist3" :key="index"
							:label="item.name" :name="item.name" @change="radioChange3">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<at-submit-btn txt="提交" @submit="submit"></at-submit-btn>
			</u--form>
		</view>
		<u-modal :show="showAppo" @confirm="cancelAppoi" ref="uModal1" :asyncClose="true" :closeOnClickOverlay="true"
			showCancelButton @cancel="showAppo=false" @close="showAppo=false" title="已预约-社区医院" :content='nextDay'
			confirmText='取消预约' cancelText='关闭'></u-modal>
		<u-modal :show="showModal" @confirm="appoimentHsp" ref="uModal" :asyncClose="true" :closeOnClickOverlay="true"
			showCancelButton @cancel="showModal=false" @close="showModal=false" title='确定要预约明日就诊吗？'></u-modal>
	</view>
</template>

<script>
	import AtSubmitBtn from '@/components/AtSubmitBtn/index.vue';
	import {
		formatTime
	} from '@/utils/format.js'
	import {
		userheal,
		hspinfo,
		appoimenthsp,
		appoimentStatus,
		cancleappoi
	} from '@/common/http.api.js'
	export default {
		components: {
			AtSubmitBtn
		},
		data() {
			return {
				requserData: {
					uID: '',
					fever: '',
					color: '',
					homefever: ''
				},
				radiovalue1: '',
				radiolist1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},

				],
				radiovalue3: '',
				radiolist3: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},

				],
				radiovalue2: '',
				radiolist2: [{
						name: '绿色',
						disabled: false
					},
					{
						name: '黄色',
						disabled: false
					},
					{
						name: '红色',
						disabled: false
					},

				],
				report: true,
				currTab: 0,
				list1: [{
					type: '0',
					name: '就诊预约',
				}, {
					type: '1',
					name: '健康上报',
				}],
				rules: {
					fever: {
						required: true,
						message: '必填'
					},
					color: {
						required: true,
						message: '必填'
					},
					homefever: {
						required: true,
						message: '必填'
					},

				},
				hspInfo: {},
				isAppoi: true,
				showModal: false,
				showAppo: false,
				uID: uni.getStorageSync('uID')
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
			this.getHspinfo()
			this.getAppostatus()
		},
		computed: {
			nextDay() {
				let day = formatTime(new Date().getTime() + 24 * 60 * 60 * 1000).split(' ')[0]
				return '明日:' + day
			},
			h_status() {
				let desc = '可预约'
				console.log(this.hspInfo);
				if (this.hspInfo.h_status !== 0) {
					desc = '已满'
				}
				return desc
			}
		},
		methods: {
			//  取消预约
			async cancelAppoi() {
				const res = await cancleappoi({
					uID: this.uID
				})
				this.isAppoi = true
				this.showAppo = false
				uni.$showMsg('已取消预约')
				this.getAppostatus()
			},
			// 查询预约状态
			async getAppostatus() {
				const res = await appoimentStatus({
					uID: this.uID
				})
				if (res.data.status === 0) {
					this.isAppoi = true
				} else {
					this.isAppoi = false
				}
			},
			// 预约医院
			async appoimentHsp() {
				console.log(this.uID);
				const res = await appoimenthsp({
					uID: this.uID,
					hID: 1
				})
				if (res.code === 0) {
					this.isAppoi = false
					this.showModal = false
				}
			},
			// 获取医院信息
			async getHspinfo() {
				const res = await hspinfo()
				this.hspInfo = res.data
				console.log(this.hspInfo);
			},
			async submit() {
				this.requserData.uID = uni.getStorageSync('uID')
				this.$refs.form.validate().then(async () => {
					uni.$loading()
					const res = await userheal(this.requserData)
					if (res.code == 0) uni.$showMsg('提交成功')
					this.$nextTick(() => {
						this.radiovalue1 = ''
						this.radiovalue2 = ''
						this.radiovalue3 = ''
					})

				})
			},
			// 单选框事件
			radioChange1(n) {
				this.requserData.fever = n
			},
			radioChange2(n) {
				this.requserData.color = n
			},
			radioChange3(n) {
				this.requserData.homefever = n
			},
			changeTab(item) {
				this.currTab = item.index
				// // 点击tabs切换
				if (this.currTab === 0) {
					this.report = true
				} else {
					this.report = false
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.tabs-box {
		background-color: #fff;
		width: 100%;

		/deep/.u-tabs__wrapper__nav__item {
			padding: 0 120rpx;
		}
	}

	.title {
		padding-top: 15rpx;
		margin-left: 25rpx;
	}

	.hsp-info {
		margin-top: 20rpx;
		padding: 5rpx;
		width: 95%;
		margin: auto;
		height: 200rpx;
		display: flex;
		border-radius: 15rpx;
		box-shadow: 0rpx 2rpx 7rpx 0 rgba(0, 0, 0, 0.08);
		justify-content: space-around;

		.cont {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.btn {
			flex-direction: column;
			display: flex;
			justify-content: center;
		}

		.img-box {
			// display: flex;
			// align-items: center;
			background-color: #000;
			height: 200rpx;
			width: 200rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
